import { Route, Switch, useParams } from "react-router-dom";
import { useFetchProjectDetails } from "api/hooks";
import { MainContent, Spinner } from "components/core";
import ProjectDetails from "components/project-details";
import { ProjectHeader } from "components/project-details/project-header";
import { useSelector } from "containers/project-data-container";
import { findProjectById } from "selectors";

const ProjectDetailsPageContainer = () => {
  const { id } = useParams<{ id: string }>();

  const project = useSelector(findProjectById(id));
  // if the user loads directly the `/projects/:id` URL in the browser,
  // the project is not available yet in the state container
  return project ? <ProjectDetailsPage project={project} /> : <Spinner />;
};

const ProjectDetailsPage = (props) => {
  const { project } = props;

  const { data: details, error } = useFetchProjectDetails(project);
  const projectWithDetails = getProjectWithDetails(project, details);

  return (
    <MainContent>
      <ProjectHeader {...props} project={projectWithDetails} />
      <Switch>
        <Route
          exact
          path="/projects/:id"
          render={() => (
            <ProjectDetails
              {...props}
              project={projectWithDetails}
              isLoading={!details}
              error={error}
            />
          )}
        />
      </Switch>
    </MainContent>
  );
};

function getProjectWithDetails(project, details) {
  if (!details?.github) return project;
  const {
    npm,
    bundle,
    packageSize,
    description,
    github: { contributor_count, commit_count, created_at },
    timeSeries,
  } = details;

  return {
    ...project,
    description,
    timeSeries,
    commit_count,
    contributor_count,
    created_at,
    npm,
    bundle,
    packageSize,
  };
}

export default ProjectDetailsPageContainer;
